<template>
  <view class="about-container">
    <u-tabs
      :list="tabs"
      :is-scroll="false"
      :current="curTab"
      active-color="#a41e14"
      :duration="0.2"
      @change="onChangeTab"
    />
    <view class="wrapper">
      <view v-if="currentList && currentList.length > 0">
        <view class="list" v-for="item of currentList">
          <view class="item">
            <image
              class="img"
              style="width: 690rpx"
              :src="item.logo"
              mode="aspectFill"
              @click="onTargetGoods(item.id)"
            />
            <!-- </view> -->
            <view class="title" @click="onTargetGoods(item.id)">{{
              item.name
            }}</view>
            <view class="course">{{ item.salePoint }}</view>
            <view class="info">
              <view>
                <text class="floor-price__samll">￥</text>
                <text class="floor-price">{{ item.price }}</text>
                <!-- 划线价 -->
                <text class="original-price">￥{{ item.linePrice }}</text>
                <text class="desc">已销售: {{ item.initSale }}</text>
              </view>

              <view class="btn-item">
                <text @click="buyNow(item)">立即购买</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <Empty v-else :isLoading="false" tips="暂无商品~"> </Empty>
    </view>
  </view>
</template>

<script>
import { setCartTabBadge, showMessage } from "@/utils/app";

import Empty from "@/components/empty";
import * as CourseApi from "@/api/course";
import * as Api from "@/api/page";
import MescrollCompMixin from "@/components/mescroll-uni/mixins/mescroll-comp.js";
import config from "@/config";

const App = getApp();

export default {
  mixins: [MescrollCompMixin],
  components: { Empty },
  data() {
    return {
      // 当前标签索引
      curTab: 0,
      tabs: [
        {
          name: `全部`,
          scoreType: 1,
        },
        {
          name: `入门课`,
          scoreType: 2,
        },
        {
          name: `基础课`,
          scoreType: 3,
        },
        {
          name: `强化课`,
          scoreType: 4,
        },
      ],
      list: [],
      currentList: [],
      currentListAll: [],
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad({ storeId }) {
    storeId = storeId ? parseInt(storeId) : 0;
    this.getPageData();
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {},

  methods: {
    /**
     * 加载页面数据
     * @param {Object} callback
     */
    getPageData(callback) {
      this.currentListAll = [];
      CourseApi.cateList()
        .then((result) => {
          this.list = result.data;
          result.data.map((item) =>
            this.currentListAll.push(...(item.goodsList || []))
          );
          if (!this.curTab) {
            this.currentList = [...this.currentListAll];
          } else {
            this.currentList = this.currentListAll[this.curTab];
          }
        })
        .finally(() => callback && callback());
    },
    // 切换标签项
    onChangeTab(index) {
      const app = this;
      app.curTab = index;
      app.currentList = [];
      if (index == 0) {
        //全部
        app.currentList = app.currentListAll;
        return;
      }
      // 设置当前选中的标签
      app.currentList = app.list[index - 1].goodsList;
    },
    /**
     * 跳转商品详情
     */
    onTargetGoods(goodsId) {
      this.$navTo(`pages/goods/detail`, { goodsId });
    },
    /**
     * 下拉刷新
     */
    onPullDownRefresh() {
      // 获取数据
      this.getPageData(() => {
        uni.stopPullDownRefresh();
      });
    },
    // 立即购买
    buyNow(shop) {
      // 跳转到订单结算页
      this.$navTo("pages/settlement/goods", {
        mode: "buyNow",
        goodsId: shop.id,
        skuId: "",
        buyNum: 1,
      });
    },
  },

  /**
   * 分享当前页面
   */
  onShareAppMessage() {
    const app = this;
    return {
      title: config.name,
      path: "/pages/index/index?" + app.$getShareUrlParams(),
    };
  },

  /**
   * 分享到朋友圈
   * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
   * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
   */
  onShareTimeline() {
    const app = this;
    const { page } = app;
    return {
      title: config.name,
      path: "/pages/index/index?" + app.$getShareUrlParams(),
    };
  },
};
</script>
<style lang="scss" scoped>
page {
  background: #ffffff;
}
.original-price {
  font-size: 24rpx;
  line-height: 1;
  text-decoration: line-through;
  color: #959595;
}
.about-container {
  .wrapper {
    margin-top: 20rpx;
    padding: 30rpx 30rpx 0 30rpx;
    background-color: #fff;
    .list {
      padding-bottom: 20rpx;
      border-bottom: 1px solid #eee;

      .title {
        font-weight: 700;
        font-size: 30rpx;
        color: #111;
        margin-top: 16rpx;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        word-break: break-all;
        overflow: hidden;
      }
      .course {
        font-size: 22rpx;
        text-align: left;
        color: #777;
        margin-top: 10rpx;
      }
      .info {
        font-size: 20rpx;
        color: #aaa;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .floor-price__samll,
        .floor-price {
          font-size: 30rpx !important;
          font-weight: 700 !important;
          white-space: nowrap;
          color: rgb(164, 30, 20);
          fill: rgb(164, 30, 20);
        }
        .original-price {
          margin: 0 10rpx;
        }
        .btn-item {
          font-size: 24rpx;
          padding: 0 20rpx;
          line-height: 52rpx;
          margin-right: 5rpx;
          color: #fff;
          border-radius: 18rpx;
          text-align: center;
          background: rgb(164, 30, 20);
        }
      }
      &:not(:first-child) {
        margin-top: 30rpx;
      }
    }
  }
}
</style>
